<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // axios 发送请求 sxios Axios.prototype.request.bind

        // 1.声明构造函数
        function Axios(config) {
            this.config = config
        }
        Axios.prototype.request = function (config) {
            // 发送请求
            //
            // 创建 promise 对象
            let promise = Promise.resolve(config)
            // 声明一个数组
            let chain = [dispatchRequest, undefined]    // indefined 作用是占位
            // 调用 then 方法指定回调
            let result = promise.then(chain[0], chain[1])
            return result
        }

        // 2. dispatchRequest 函数
        function dispatchRequest(config) {
            // 调用适配器发送请求
            return xhrAdapter(config).then(response => {
                // 对响应结果进行转换处理
                return response
            }, error => {
                throw error
            })
        }

        // 3. adpter 适配器
        function xhrAdapter(config) {
            return new Promise((resolve, reject) => {
                // 发送一个 axja 请求
                let xhr = new XMLHttpRequest()
                // 初始化
                xhr.open(config.method, config.url)
                xhr.send()
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve({
                                config: config, // 配置对象
                                data: xhr.response, // 响应体
                                headers: xhr.getAllResponseHeaders(),   // 响应头
                                request: xhr,   // xhr 请求对象
                                status: xhr.status,    // 响应状态
                                statusText: xhr.statusText  // 响应状态字符串
                            })
                        } else {
                            reject(new Error('请求失败，失败状态码为：' + xhr.status))
                        }
                    }
                }
            })
        }

        // 4. 创建 axios 函数
        let axios = Axios.prototype.request.bind(null)

        axios({
            method: 'GET',
            url: 'http://www.liulongbin.top:3007/my/article/cates',
        }).then(response => {
            console.log(response);
        })
    </script>
</body>

</html>